<template lang="pug">
  div.radio-group
    el-radio-group.tabTypes.mb20(v-model="curTabKey" @change="change")
      el-radio-button(v-for="tab in tabs" :key="tab.name" :label="tab.name") {{tab.meta.title}}
    router-view
</template>
<script>
import { mapGetters } from 'vuex'
import { findTreeNode } from '@/utils/arrayToTree'

export default {
  data () {
    return {
      curTabKey: 'setting::hardware::iccard:student',
      tabs: []
    }
  },
  computed: {
    ...mapGetters(['addRoutes'])
  },
  async created () {
    console.log(this.$route)
    const node = await findTreeNode({ value: 'setting::hardware::iccard', key: 'name', tree: this.addRoutes })
    this.tabs = node.children
    if (node.children[0] && this.$route.name === 'setting::hardware::iccard') {
      this.$router.push(node.children[0].path)
      return
    }
    this.curTabKey = this.$route.name
  },
  methods: {
    async change (name) {
      console.log(name)
      const node = await findTreeNode({ value: name, key: 'name', tree: this.addRoutes })
      this.$router.push(node.path)
    },
    routeToggle (tab) {
      console.log(tab)
      this.$router.push(tab.path)
    }
  }
}
</script>
<style lang="scss" scoped>
.tabTypes {
  ::v-deep {
    .el-radio-button {
      background-color: #EEF1F4 !important;
      padding: 4px;
      border-radius: 3px;
    }

    .el-radio-button__inner {
      background-color: #EEF1F4 !important;
    }

  }
}
</style>
